// ### 封装AuthRoute鉴权路由组件
// - 在components目录中创建AuthRoute/index.js 文件
// - 创建组件AuthRoute并导出
// - 在AuthRoute组件中返回  Route组件   （在Route基础上做了一层包装，用于实现自定义功能）
// - 给Route组件，添加render方法，指定改组件要渲染的内容（类似与component属性）
// - 在render方法中，调用isAuth() 判断是否登陆
// - 如果登陆了，就渲染当前组件（通过参数component获取到要渲染的组件，需要重命名）
// - 如果没有登陆，就重定向到登陆页面，并且指定登陆成功后腰跳转的页面路径
// - 将AuthRoute组件接收到的props原样传递给Route组件（保证与Route组件使用方式相同）
// - 使用AuthRoute组件配置路由规则，验证是否实现页面的登陆访问控制

import React from "react";
import { Redirect, Route } from "react-router-dom";

import { isAuth } from "../../utils/auth";

const AuthRoute = ({ component: Component, ...rest }) => {
    return (
        <Route
            {...rest}
            render={(props) => {
                const isLogin = isAuth();

                if (isLogin) {
                    // 已登录
                    // 将 props 传递给组件，组件中才能获取到路由相关信息
                    return <Component {...props} />;
                } else {
                    // 未登录
                    return (
                        <Redirect
                            to={{
                                pathname: "/login",
                                state: {
                                    from: props.location, // 这个是提前记录你到时候登录后需要调整的位置
                                },
                            }}
                        />
                    );
                }
            }}
        />
    );
};
export default AuthRoute;
